<template>
	<div class="consume-class">
		<div class="consume-search">
			<uni-datetime-picker v-model="dataDate" :border="false" type="daterange" :disabled="true"/>
			<uni-data-select v-model="coachId" :localdata="coachArr" @change="changeCoach" :disabled="type===1"></uni-data-select>
		</div>
		<table class="record-table" id="tableBody">
			<tr>
				<th>会员姓名</th>
				<th>课程名称</th>
				<th>上课时间</th>
				<th>课时单价</th>
			</tr>
			<tr v-for="(item, index) in tableData" :key="index" @click="goDetail(item)">
				<td>{{item.memberUsers}}</td>
				<td>{{item.courseName}}</td>
				<td>{{item.classStartTime + '-' + (item.classEndTime?item.classEndTime.split(' ')[1]:'') }}</td>
				<td>{{ item.usedMoney == '-' ? item.usedMoney : (item.usedMoney/100).toFixed(2) }}</td>
			</tr>
		</table>
		<uni-load-more :status="more"></uni-load-more>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import {selectCoachUsedDetail, coachVisibleList} from '@/api/manageApi'
export default {
	data() {
		return {
			page: 1,
			limit: 15,
			totalPage: 1,
			more: 'more',
			tableData: [
        // {number: 8888881, account: '888****88', award: 888888888 }
      ],
			coachId: '',
			coachArr: [],
			dataDate: [],
			start: '',
			end: '',
			storeId: '',
			type: 1
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	//下拉刷新
	onPullDownRefresh () {
		this.page = 1
		this.handleList()
	},
	//上拉加载
	onReachBottom () {
		if(this.page < this.totalPage){
			this.page++
			this.handleList()
		}
	},
	onLoad(option) {
		this.start = option.start
		this.end = option.end
		this.dataDate = [option.start, option.end]
		if(option.type == 1){
			this.type = 1
			this.coachArr = [{text: this.userInfo.userName, value: this.userInfo.userId}]
			this.coachId = this.userInfo.userId
			this.storeId = this.userInfo.storeId
			this.page = 1
			this.handleList()
		} else {
			this.type = 2
			this.getCoachList()
			this.storeId = option.storeId
		}
	},
	methods: {
		goDetail (item) {
			// console.log(item)
			this.goUrl('/pagesA/sign/signCourseDetail?id='+item.signCourseId)
		},
		changeCoach (e) {
			this.coachId = e
			this.page = 1
			this.handleList()
		},
		getCoachList () {
      var params = {}
      coachVisibleList(params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.coachArr = data.map((item, index) => {
						return {
							value: item.id,
							text: item.userName
						}
					})
					if (this.coachArr.length > 0) {
						this.coachId = this.coachArr[0].value
					}
					this.page = 1
					this.handleList()
        }
      })
    },
		// 列表接口
    handleList () {
      var params = {
        "coachUserId": this.coachId,
        "current": this.page,
        "end": this.end,
        "ext": {},
        "key": '',
        "orders": [
          {
            "order": "desc",
            "sort": "createTime"
          }
        ],
        "saleMode": '',
        "size": this.limit,
        "start": this.start,
        "storeId": this.storeId
      }
      selectCoachUsedDetail(params).then(res => {
        // console.log(res)
				if (res.code == '200') {
					var data = res.data.records
					this.more = 'more'
					if (this.page == 1) {
						this.totalPage = Math.ceil(parseInt(res.data.total)/this.limit)
						this.tableData = data
						uni.stopPullDownRefresh()
					} else {
						this.tableData = this.tableData.concat(data)
					}
					if (this.page >= this.totalPage) {
						this.more = 'noMore'
					}
				}
      })
    }
	}
}
</script>

<style lang="scss">
.consume-class {
	background: #fff;
	.record-table{
		width: 100%;
		text-align: center;
		table-layout: fixed;
		empty-cells: show;
		border-collapse: collapse;
		font-size: 28rpx;
		color: #575757;
	}
	.record-table tr{
		display: flex;
	}
	.record-table tr th{
		height: 76rpx;
		line-height: 76rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: #FF5D3D;
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		width: 25%;
	}
	.record-table tr td{
		// height: 76rpx;
		// line-height: 76rpx;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		width: 25%;
		font-size: 24rpx;
		padding: 10rpx 2rpx;
	}
	.record-table tr th:nth-child(3), .record-table tr td:nth-child(3){
		width: 34%;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}
	.record-table tr:nth-child(odd){
		background: #fff;
	}
	.record-table tr:nth-child(even){
		background: #FFF3EB;
	}
	.consume-search{
		display: flex;
		padding: 20rpx;
		.uni-date-x{
			margin-right: 30rpx;
		}
		.uni-date__x-input{
			color: #000;
			font-size: 26rpx;
		}
	}
}
</style>
